<template>
	<div class="menu2-container">
		<div class="menu2">
			<div class="left section section1" @click="go('/pages/index/exposureTableList/exposureTableList')">
				<div class="h1 flex">
					<image src="/static/newIndex/title-icon.png" mode="widthFix"
						style="width:26rpx;margin-right: 8rpx ;"></image>
					{{$t('曝光台')}}
				</div>
				<div class="h2" v-if="lang=='zh'">外贸骗局，骗子全曝光 避免上当</div>
				<div class="h2" v-else style="font-size: 22rpx;">
					Мошенничество во внешней торговле, все мошенники разоблачаются, чтобы не быть обманутыми
				</div>
				<div class="span">{{$t("查看")}}</div>
			</div>
			<div class="right">
				<div class="section section2" @click="go('/pages/index/lifeadvertisingList/lifeadvertisingList')">
					<div class="h1 flex">
						<image src="/static/newIndex/title-icon.png" mode="widthFix"
							style="width:26rpx;margin-right: 8rpx ;"></image>{{$t('生活广告')}}
					</div>
					<div class="h2" v-if="lang=='zh'">衣食住行，异国信息全汇总</div>
					<div class="go">{{$t("查看")}}</image>
					</div>
				</div>
				<div class="section section3" @click="go('/pages/index/candrNewsList/candrNewsList')">
					<div class="h1 flex">
						<image src="/static/newIndex/title-icon.png" mode="widthFix"
							style="width:26rpx;margin-right: 8rpx ;"></image>{{$t('中俄动态')}}
					</div>
					<div class="h2" v-if="lang=='zh'">第一时间获取行业情报为您 实时更新</div>
					<div class="go">{{$t("查看")}}</image>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				lang: uni.getStorageSync("lang")
			}
		},
		methods: {
			go(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="less">
	.flex {
		display: flex;
		align-items: center;
	}

	.menu2-container {
		width: 100%;
		background-color: #f5f5f5;
		padding: 0 30rpx;
		box-sizing: border-box;

		.left {
			width: 48%;
			height: 410rpx;
		}

		.right {
			height: 410rpx;
			width: 48%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.section {
				width: 100%;
				height: 47%;
			}
		}

		.section {
			background-color: #F0F5FF;
			border-radius: 26rpx;
			padding: 24rpx;
			box-sizing: border-box;

			.span {
				width: 100+5rpx;
				height: 34+5rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				border: 1rpx solid #6d6d6d;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #6d6d6d;
				margin-top: 16rpx;
				padding-bottom: 5rpx;
			}

			.go {
				width: 100+5rpx;
				height: 34+5rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				border: 1rpx solid #6d6d6d;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #6d6d6d;
				margin-top: 16rpx;
				padding-bottom: 5rpx;
			}

			.h1 {
				color: #4063FF;
				font-weight: bold;
				font-size: 26rpx;
			}

			.h2 {
				font-size: 22rpx;
				color: #999;
				margin-top: 4px;
			}
		}

		.menu2 {
			width: 100%;
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 26rpx;
		}
	}

	.section1 {
		background-image: url("/static/m1.png");
		background-repeat: no-repeat;
		background-position: right bottom;
		background-size: 200rpx 200rpx;
	}

	.section2 {
		background-image: url("/static/m2.png");
		background-repeat: no-repeat;
		background-position: right bottom;
		background-size: 148rpx 97rpx;
	}

	.section3 {
		background-image: url("/static/m3.png");
		background-repeat: no-repeat;
		background-position: right bottom;
		background-size: 148rpx 97rpx;
	}
</style>